{include file="public/header" select="1" /}
<body class="hide-top bgc">
<div class="detail-hd flex-center" style="display: none">
    <i class="layui-icon layui-icon-left" onclick="goBack()"></i>
    <ul>
        <li class="active pro" data-id="pro">
            <div>商品</div>
            <p></p>
        </li>
        <li class="det" data-id="spec">
            <div>详情</div>
            <p></p>
        </li>
    </ul>
</div>
<div class="detail-swiepr" id="pro">
    <div class="swiper">
        <div class="swiper-container carousel">
            <div class="swiper-wrapper">
                {foreach name="$info.images" item="vo"}
                <div class="swiper-slide flex-center">
                    <img src="{$vo}" alt=""/>
                </div>
                {/foreach}
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <i class="layui-icon layui-icon-left" onclick="goBack()"></i>
</div>
<div class="detail-news">
    <div class="price">
        <p>￥<span>{$info.price}</span></p>
        <p class="old">￥{$info.market_price}</p>
    </div>
    <p>{$info.title}</p>
    <p style="font-size: 0.75rem;color: #999;">{$info.describe}</p>
    <p class="flex-layout">销量{$info.sales} <span>库存{$info.stock}</span></p>
</div>
<div class="detail-title flex-center" id="spec">
    <span></span>商品详情 <span></span>
</div>
<div class="detail-txt">
    {:htmlspecialchars_decode($info['content'])}
</div>
<div class="detail-footer flex-layout">
    <div onclick="load_href('{:url(\'cart/index\')}',2)">
        <img src="/static/index/img/icon51.png" alt="">
        <p>购物车</p>
        <span>{$cart_num}</span>
    </div>
    <ul>
        <li>
            <img src="/static/index/img/icon52.png" alt="">
            <p>加入购物车</p>
        </li>
        <li>
            <img src="/static/index/img/icon53.png" alt="">
            <p>立即购买</p>
        </li>
    </ul>
</div>
<div class="model">
    <div class="detail-mdl">
        <div class="detail-mdl-pro">
            <p class="flex-center">
                <img src="{$info.icon}" alt="">
            </p>
            <div class="rgt">
                <p class="price">￥<span>{$info.price}</span></p>
                <p>库存 {$info.stock}</p>
                <img src="/static/index/img/icon54.png" class="cancel" alt="">
            </div>
        </div>
        <div class="model-mdl-stepper flex-layout">数量
            <div>
                <p class="minus">-</p>
                <input type="hidden" id="stock" value="{$info.stock}"/>
                <input class="inpNum" type="number" name="num" id="num" value="{if $info.stock>0}1{else/}0{/if}"
                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,0})?).*$/g, '$1')" >
                <p class="add">+</p>
            </div>
        </div>
        <ul class="model-mdl-btn">
            <li class="addCart">
                <img src="/static/index/img/icon52.png" alt="">
                <p>加入购物车</p>
            </li>
            <li class="addOrder">
                <img src="/static/index/img/icon53.png" alt="">
                <p>立即购买</p>
            </li>
        </ul>
    </div>
</div>
{include file="public/footer" select="1" /}
<script>
    var swiper = new Swiper('.carousel', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        loop: true
    });

    $(document).ready(function() {
        $(document).scroll(function() {
            if($(this).scrollTop() >= 560) {
                $('.det').addClass('active').siblings().removeClass('active')
            } else {
                $('.pro').addClass('active').siblings().removeClass('active')
            }
            if($(this).scrollTop() >= 100) {
                $(".detail-hd").show()
            } else {
                $('.detail-hd').hide()
            }
        })
    });

    $('.detail-hd li').click(function() {
        $("html,body").animate({scrollTop: $('#' + $(this).data('id')).offset().top - 44 + 'px'}, 1000);
    });

    $('.cancel').click(function() {
        $('.model').hide()
    });

    $('.detail-footer li').click(function() {
        $('.model').show()
    });

    $(".addCart").click(function () {
        var num = $(".inpNum").val();
        if (num <= 0) {
            layer.msg('数量错误');
            return false;
        }
        var load = layer.load(2);
        $.ajax({
            type: 'POST',
            url: '{:url("cart/add")}',
            data: {num: num, id: '{$info.id}'},
            dataType: "json",
            success: function (data) {
                layer.close(load);
                if (data.code === 1) {
                    layer.msg(data.msg, {time: 1000}, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    });

    $('.addOrder').click(function () {
        var num = $(".inpNum").val();
        if (num <= 0) {
            layer.msg('数量错误');
            return false;
        }
        _ajax('{:url("product/submit")}', {num: num, id: '{$info.id}'});
    });

    // 数量加减
    numInput('.minus', '.add', '.inpNum');
</script>
</body>
</html>